<ion-header>
  <ion-toolbar color="gm-primary">
    <ion-buttons left>
      <button ion-button clear icon-left class="header-btn" *ngIf="user_info.type > 0" (click)="onTodayStrategy()">
          <ion-icon name="gm-vd"></ion-icon>
          策略
      </button>
    </ion-buttons>

    <ion-title>金银大咖</ion-title>

    <ion-buttons right>
      <button ion-button class="header-btn" *ngIf="user_info.type < 1" (click)="onBecameMember()">我要开户</button>
      <button ion-button icon-left clear class="header-btn" *ngIf="user_info.type > 0" (click)="onVipTrade()">
          <ion-icon name="gm-vd"></ion-icon>
          消息
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-refresher (ionRefresh)="onRefresh($event)">
        <ion-refresher-content
            pullingIcon="arrow-dropdown"
            pullingText="下拉开始刷新"
            refreshingSpinner="circles"
            refreshingText="数据正在载入">
        </ion-refresher-content>
    </ion-refresher>

    <div class="quotation-header" (click)="onItemSelected()" tappable>
        <div class="start-item">
            <ion-icon color="gm-green" name="podium"></ion-icon>
            &nbsp;行情
        </div>
        <ion-icon color="gray-normal" name="ios-arrow-forward"></ion-icon>
    </div>

    <div class="grid-list">
        <div *ngFor="let quotation of quotation_list; let idx = index"
             [ngClass]="setGridListStyle(idx)" tappable (click)="onItemSelected(quotation)">
            <div class="grid-frame">
                <div class="grid-content" [ngClass]="setGridLayoutStyle(idx)">
                    <div class="grid-content" [ngClass]="setGridLayoutStyle2(idx)">
                        <div class="title">
                            {{quotation.name}}
                        </div>
                        <div [ngClass]="setGridItemPrice(quotation.range)">
                            {{quotation.tradePrice}}
                        </div>
                        <div [ngClass]="setGridItemRange(idx, quotation.range)">
                            <div>{{quotation.range}}</div>
                            <div>{{quotation.rangePercent}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--<div class="grid-item-more" (click)="onItemSelected()">更多</div>-->
    </div>

    <ion-toolbar color="gm-primary">
        <ion-segment [(ngModel)]="news_type" (ionChange)="onSegmentChanged($event)">
            <ion-segment-button value="comm_news">
                要闻
            </ion-segment-button>
            <ion-segment-button value="gold_news">
                贵金属
            </ion-segment-button>
        </ion-segment>
    </ion-toolbar>

    <div [ngSwitch]="news_type">
        <ion-list *ngSwitchCase="'comm_news'">
            <div class="info-item" *ngFor="let news of news_list[0]" (click)="onInfoDetailSelected(news)" tappable>
                <img class="item-image" [src]="news.image">
                <div class="item-body">
                    <div class="content">{{news.newsTitle}}</div>
                    <div class="footer">
                        <div>
                            <ion-icon name="stats" color="gray-normal"></ion-icon>
                            {{news.clickNum}}
                        </div>
                        <div>{{news.publishTime|date:'MM-dd HH:mm'}}</div>
                    </div>
                </div>
            </div>
        </ion-list>

        <ion-list *ngSwitchCase="'gold_news'">
            <div class="info-item" *ngFor="let news of news_list[1]" (click)="onInfoDetailSelected(news)">
                <img class="item-image" [src]="news.image">
                <div class="item-body">
                    <div class="content">{{news.newsTitle}}</div>
                    <div class="footer">
                        <div>
                            <ion-icon name="stats" color="gray-normal"></ion-icon>
                            {{news.clickNum}}
                        </div>
                        <div>{{news.publishTime|date:'MM-dd HH:mm'}}</div>
                    </div>
                </div>
            </div>
        </ion-list>
    </div>
</ion-content>
